<template>
  <div>
    <div class="skeleton-style" v-if="loading">
      <div class="skeleton-style1">
        <van-skeleton :row="1" :loading="loading"></van-skeleton>
      </div>
      <div class="skeleton-style2">
        <van-skeleton :row="9" :loading="loading"></van-skeleton>
      </div>
      <div class="skeleton-style3">
        <van-skeleton :row="1" :loading="loading"></van-skeleton>
      </div>
    </div>

    <div class="go-back" @click="goBack">
      <span class="go-back-span">
        <van-icon name="arrow-left"/>
      </span>
    </div>
    <div class="image-preview" v-if="!loading">
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(list, index) in themeMess.imageList" :key="index">
          <div class="swipse-wh-box">
            <img class="swpise-wh" :src="address + list.iamge" alt>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="theme-info-mess" v-if="!loading">
      <p>{{themeMess.theme_title}}</p>
      <div class="trad-type margin-tp10">交易类型: {{themeMess.trade_type }}</div>
      <div class="trad-status margin-tp10">交易状态: {{themeMess.theme_status === '1' ? "进行中" : "已关闭"}}</div>
      <div class="concat-stype margin-tp10">
        <span>联系方式:</span>
        <input id="copycode" type="text" readonly="readonly" v-model="themeMess.contact">
        <van-button type="default" @click="copyCode()">复制</van-button>
      </div>
      <div class="reference-value margin-tp10">参考价值: {{themeMess.trade_price}} 元</div>
      <div class="transaction-mode margin-tp10">交易方式: {{themeMess.trade_way}}</div>
      <div class="place-transaction margin-tp10">交易地点: {{themeMess.trade_address}}</div>
      <div class="product-description margin-tp10">
        产品说明:
        <div class="produce-show">{{themeMess.show_product}}</div>
      </div>
      <div class="remarks-show">添加联系方式时请备注: 节点校园</div>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";
import { Swipe, SwipeItem, Button, Notify, Icon, Skeleton } from "vant";
import { areaCodeList, selectThemeDetail } from "../../api/api.js";
import { setTimeout } from "timers";
import staturl from "../../api/urls.js";
export default {
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Button.name]: Button,
    [Notify.name]: Notify,
    [Icon.name]: Icon,
    [Skeleton.name]: Skeleton
  },
  data() {
    return {
      themeMess: {},
      address: staturl.staturl,
      loading: true
    };
  },
  computed: {},
  created() {
    this.selectThemeDetails();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },

    // 查询主题详情
    selectThemeDetails() {
      let paramObj = {
        themeId: this.$route.query.themeId
      };
      selectThemeDetail(paramObj).then(res => {
        if (res.data.checkCode === "PRO-920") {
          this.themeMess = res.data.result;
            this.loading = false;
        }
      });
    },
    copyCode() {
      var copycode = document.getElementById("copycode");
      copycode.select(); // 选择对象
      document.execCommand("Copy"); // 执行浏览器复制命令
      Notify({
        message: "复制成功",
        duration: 2000,
        background: "#1989fa"
      });
    }
  }
};
</script>

<style lang="less" scoped>
.go-back {
  width: 100%;
  position: fixed;
  top: 0rem;
  z-index: 9999999;
  .go-back-span {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: #f5f5f5;
    text-align: center;
    line-height: 1rem;
    font-size: 0.6rem;
    margin-left: 0.4rem;
    opacity: 0.5;
  }
}

.swipse-wh-box {
  width: 100%;
  height: 6rem;
  overflow: hidden;
  .swpise-wh {
    width: 100%;
    height: 100%;
  }
}
.theme-info-mess {
  padding: 0.5rem 0.5rem;
  font-size: 0.4rem;
  background: #ffffff;
  p {
    margin: 0rem;
    font-size: 0.6rem;
    font-weight: bold;
  }
  .trad-type {
    margin-top: 0.3rem;
  }
  .trad-status {
  }
  .concat-stype {
    span {
      vertical-align: middle;
    }
    input {
      border: none;
      font-family: Arial, Helvetica, sans-serif;
      vertical-align: middle;
    }
  }
  .reference-value {
  }
  .transaction-mode {
  }
  .place-transaction {
  }
  .product-description {
    .produce-show {
      text-indent: 1.8rem;
    }
  }
  .remarks-show {
    font-size: 0.2rem;
    text-align: right;
    margin-top: 1rem;
  }
}
.margin-tp10 {
  margin-bottom: 0.3rem;
}
</style>